<template>
  <div id="collage-container">
    <el-card class="box-card">
      <template #header>
        <div class="clearfix">
          <span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>其他管理</el-breadcrumb-item>
              <el-breadcrumb-item>学院管理</el-breadcrumb-item>
            </el-breadcrumb></span
          >
        </div>
      </template>
      <div>
        <el-button type="primary" size="small" @click="dialogVisible = true"
          >创建学院</el-button
        >
      </div>

      <el-table
        :data="collages"
        :stripe="true"
        :height="maxHeight"
        style="width: 100%; top: 15px"
        v-loading="loading"
      >
        <el-table-column label="学院编号" width="180">
          <template #default="scope">
            <span>{{ scope.row.collageNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="学院名称" width="180">
          <template #default="scope">
            <el-input
              v-if="scope.row.showInput"
              size="small"
              v-model="scope.row.collageName"
            />
            <span v-else>{{ scope.row.collageName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          label="最近更新"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button
              size="mini"
              type="primary"
              @click="edit(scope.row)"
              v-if="!scope.row.showInput"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="success"
              @click="editSave(scope.row)"
              v-else
              >保存</el-button
            >
            <el-popconfirm
              confirmButtonText="确定"
              cancelButtonText="取消"
              icon="el-icon-info"
              cancelButtonType="danger"
              iconColor="red"
              title="确定删除该学院信息吗？"
              @confirm="deleteCollage(scope.row.collageNum)"
            >
              <template #reference>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
  <div class="collage-dialog">
    <el-dialog
      title="添加学院"
      v-model="dialogVisible"
      width="400px"
      @close="close"
    >
      <el-card class="box-card" shadow="never">
        <el-form
          :model="collage"
          ref="collageRef"
          label-width="80px"
          :rules="saveCollageRule"
        >
          <el-form-item label="学院名称" prop="collageName">
            <el-input v-model="collage.collageName"></el-input>
          </el-form-item>
          <el-form-item label="学院编号" prop="collageNum">
            <el-input v-model="collage.collageNum"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, unref } from "vue";
import { OtherService, Collage } from "@/api/other";
import Code from "@/consts/common";
import { ElMessage } from "element-plus";

export default {
  name: "Collage",
  setup() {
    const collages: Collage[] = [];
    const collage: Collage = {};
    const collageRef = ref();

    let data = reactive({
      collages: collages,
      collage: collage,
      loading: false,
      maxHeight: document.documentElement.clientHeight - 280,
      dialogVisible: false,
      saveCollageRule: {
        collageName: [
          { required: true, message: "请输入学院名称", trigger: "blur" },
        ],
        collageNum: [
          { required: true, message: "请输入学院编号", trigger: "blur" },
        ],
      },
      close() {
        const collageRefq = unref(collageRef);
        if (!collageRefq) return;
        collageRefq.resetFields();
      },
      edit(collage: Collage) {
        collage.showInput = true;
      },
      editSave(collage: Collage) {
        collage.showInput = false;
        data.loading = true;
        OtherService.saveCollages(collage, "edit").then((res) => {
          if (res.code == Code.CODE_SUCCESS) {
            ElMessage({
              showClose: true,
              message: "修改学院信息成功",
              type: "success",
            });
          } else {
            listCollages();
          }
          data.loading = false;
        });
      },
      save() {
        const collageRefq = unref(collageRef);
        if (!collageRefq) return;
        collageRefq.validate((valid: Boolean) => {
          if (valid) {
            OtherService.saveCollages(data.collage, "add").then((res) => {
              if (res.code == Code.CODE_SUCCESS) {
                ElMessage({
                  showClose: true,
                  message: "添加学院信息成功",
                  type: "success",
                });
                data.dialogVisible = false;
                data.collage = {};
                listCollages();
              }
            });
          }
        });
      },
      deleteCollage(collageNum: string) {
        const ids: string[] = [collageNum];
        OtherService.deleteCollage(ids).then((res) => {
          if (res.code == Code.CODE_SUCCESS) {
            ElMessage({
              showClose: true,
              message: "删除学院信息成功",
              type: "success",
            });
            listCollages();
          }
        });
      },
    });
    const listCollages = () => {
      OtherService.getCollages().then((res) => {
        data.collages = res.data;
      });
    };
    listCollages();
    const getHeight = () => {
      data.maxHeight = document.documentElement.clientHeight - 280;
    };

    window.addEventListener("resize", getHeight, false);
    return {
      ...toRefs(data),
      collageRef,
    };
  },
};
</script>

<style lang="less" scoped>
</style>

<style lang="less">
.collage-dialog {
  .el-card__body {
    padding: 5px 15px !important;
  }
  .el-dialog__body {
    padding: 20px 20px;
  }
}
</style>